<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'
// import productlist from '@/views/merchant/product-list.index.vue'
// import diyproduct from '@/views/config/diyproduct.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

const options = ref([
    { label: '筛选模式', value: 'more', order: '' },
    { label: '自定义选择', value: 'special' },
])
var defaultName = JSON.parse(JSON.stringify(config.value));
function onChange(value) {
    const find = options.value.find(item => item.value == value);
    if(find?.value=='more'){
        config.value.name = defaultName.name;
        config.value.category_id = defaultName.category_id||'';
        config.value.order = defaultName.order||'';
    }else{
        config.value.name = find?.label;
        config.value.category_id = '';
        config.value.order = '';
    }
}

// onChange(config.value.value)

function onProduct(item) {
    var obj = {
        id: item.id,
        name: item.name,
        url: item.goods?.defaultImgUrl,
        // price: item.goods?.min,
        // sale: item.sale,
        // stock: item.goods?.skus?.[0]?.ext2
    }
    config.value.list.push(obj)
}
const dialog = ref(false)


// 商品列表配置
const dialogProList = ref(false)
function onProList(item, obj) {
    config.value.name = item.name;
    config.value.order = obj.order;
    config.value.category_id = obj.category_id;
    dialogProList.value = false;
}

</script>

<template>

    <el-form :model="config" label-width="70px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <!-- <el-form-item label="标题名">
            <el-input type="text" v-model="config.name" />
        </el-form-item> -->
        <el-form-item label="商品板块">
            <el-radio-group v-model="config.value" @change="onChange">
                <el-radio v-for="item in options" :key="item.value" :value="item.value" border>{{ item.label }}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="筛选模式" v-show="config.value!='special'">
            <el-button type="primary" plain class="blue" @click="dialogProList=true" style="margin: 0"><span v-if="config.category_id">分类：</span>{{ config.name==''?'选择模式':config.name }}</el-button>
        </el-form-item>
        <el-form-item label="呈现数量" v-show="config.value!='special'">
            <el-input-number type="number" v-model="config.size"></el-input-number>
        </el-form-item>
        <el-form-item label="商品" v-show="config.value=='special'">
            <el-button type="primary" plain @click="dialog = true" style="margin: 0">新增商品</el-button>
            <div style="width: 100%;max-height: 70vh;overflow: auto;margin-top: 20px;">
                <div class="flexrow justify-start" v-draggable="[config.list, { animation: 150 }]">
                    <div class="iconbox" v-for="(item, index) in config.list" :key="item.key" :title="item.name">
                        <div class="icon dragmove">
                            <img class="objcover" :src="item.url" :alt="item.name" />
                        </div>
                        <h3>{{ item.name }}</h3>
                        <div class="delete handle" @click="config.list.splice(index, 1)">×</div>
                    </div>
                </div>
            </div>

        </el-form-item>
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>

    <el-dialog v-model="dialog" title="选择商品" top="2vh">
        <div style="height: 88vh;overflow: auto;">
            <!-- <productlist :xuanze="true" :initObj="{ selected:config.list||[] }" @tohost="onProduct" /> -->
        </div>
    </el-dialog>

    <el-dialog v-model="dialogProList" title="选择商品列表">
        <!-- <diyproduct @tohost="onProList" /> -->
    </el-dialog>



</template>

<style scoped>
.iconbox{position: relative;margin:0 10px 10px 0;width: 110px;}
.icon{overflow: hidden;background-color: #e3f3ff;width: 110px;height: 110px;}
.iconbox .delete{
    width: 20px;height: 20px;line-height: 20px;text-align: center;
    position: absolute;top: 0;right: 0;
    background-color: rgba(0, 0, 0, 0.5); color: white;
}
h3{font-size: 13px; margin: 0;padding: 0;text-align: center;width: 100%;height: 30px; overflow: hidden;}
</style>